<template>
  <view class="box">
    <uni-section title="">
      <view class="example">
        <!-- 基础用法，不包含校验规则 -->
        <uni-forms
          label-width="100px"
          ref="baseForm"
          :rules="rules"
          :model="baseFormData"
        >
          <uni-forms-item class="label" label="车牌号码" required name="carId">
            <uni-data-select
              v-model="baseFormData.carId"
              :localdata="range"
              @change="change"
              placeholder="请选择"
            ></uni-data-select>
          </uni-forms-item>
          <uni-forms-item
            class="label"
            label="费用说明"
            required
            name="expenseDesc"
          >
            <uni-easyinput
              type="textarea"
              v-model="baseFormData.expenseDesc"
              placeholder="请输入费用说明"
            />
          </uni-forms-item>
          <uni-forms-item class="label" label="车辆保管费" name="storageFee">
            <uni-easyinput
              v-model="baseFormData.storageFee"
              placeholder="请输入车辆保管费"
            />
          </uni-forms-item>
          <uni-forms-item class="label" label="保险费" name="premium">
            <uni-easyinput
              v-model="baseFormData.premium"
              placeholder="请输入保险费"
            />
          </uni-forms-item>
          <uni-forms-item class="label" label="车船税" name="vehicleTax">
            <uni-easyinput
              v-model="baseFormData.vehicleTax"
              placeholder="请输入车船税"
            />
          </uni-forms-item>
          <uni-forms-item class="label" label="汽油费" name="gasCharge">
            <uni-easyinput
              v-model="baseFormData.gasCharge"
              placeholder="请输入汽油费"
            />
          </uni-forms-item>
          <uni-forms-item class="label" label="维修费" name="maintenanceCost">
            <uni-easyinput
              v-model="baseFormData.maintenanceCost"
              placeholder="请输入维修费"
            />
          </uni-forms-item>
          <uni-forms-item class="label" label="过桥费" name="bridgeToll">
            <uni-easyinput
              v-model="baseFormData.bridgeToll"
              placeholder="请输入过桥费"
            />
          </uni-forms-item>
          <uni-forms-item class="label" label="年审费" name="reviewFee">
            <uni-easyinput
              v-model="baseFormData.reviewFee"
              placeholder="请输入年审费"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
      <view style="height: 80px"></view>
      <view class="below">
        <u-button type="primary" @click="submit('baseForm')">保存</u-button>
      </view>
    </uni-section>
  </view>
</template>

<script>
import {
  list,
  carInfo,
  getDetail,
  remove,
  add,
  update,
} from "@/api/vehiclefees";
export default {
  name: "MinirabbitAdd",

  data() {
    return {
      // 表单数据
      baseFormData: {
        carId: "",
        expenseDesc: "",
        storageFee: "",
        premium: "",
        vehicleTax: "",
        gasCharge: "",
        maintenanceCost: "",
        bridgeToll: "",
        reviewFee: "",
      },
      range: [],
      rules: {
        carId: {
          rules: [
            {
              required: true,
              errorMessage: "车牌号码不能为空",
            },
          ],
        },
        expenseDesc: {
          rules: [
            {
              required: true,
              errorMessage: "费用说明不能为空",
            },
          ],
        },
      },
    };
  },
  async onLoad(options) {
    const res = await carInfo();
    this.range = res.data.records.map((item) => {
      return {
        text: item.carNumber,
        value: item.id,
      };
    });
  },

  mounted() {},

  methods: {
    async submit(ref) {
      const res = await this.$refs[ref].validate();
      const value = {
        ...res,
      };
      await add(value);
      uni.showToast({
        title: `提交通过`,
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  //   background-color: #f2f2f2;
}
.box {
  background-color: #f2f2f2;
}
.label {
  padding: 0 12px 0 18px !important;
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 20px;
}
</style>